import React, { useEffect, useState, useRef } from 'react'
import { useNavigate, useSearchParams } from 'react-router-dom'
import axios from 'axios'
import { Button, Input } from 'antd'
import "./context.css"
import { Share } from '@nutui/icons-react'
import { Mask, Popup } from 'antd-mobile'
export default function Context() {
    let user = sessionStorage.getItem("user")
    console.log(JSON.parse(user).username);
    let [url, setUrl] = useSearchParams()
    let [list, setList] = useState([])
    let [data, setData] = useState([])
    let [datas, setDatas] = useState([])
    let [arr, setArr] = useState([])
    let [arrs, setArrs] = useState([])
    let id = url.get("id")
    let [ids, setIds] = useState("")
    let [flag, setFlag] = useState(true)
    let [flags, setFlags] = useState(false)
    let [status, setStatus] = useState(false)
    let navigate = useNavigate()
    const [visible, setVisible] = useState(false)
    const [visible5, setVisible5] = useState(false)
    const [contents, setContents] = useState("")
    const [scrollDistance, setScrollDistance] = useState(0)
    let [content, setContent] = useState("")
    useEffect(() => {
        getarticle(id)
        window.addEventListener('scroll', handleScroll);
        return () => {
            window.removeEventListener('scroll', handleScroll);
        };

    }, [])
    const handleScroll = () => {
        const scrollTop = window.scrollY;
        setScrollDistance(scrollTop);

        if (scrollTop > 200) {
            setFlags(true);
        } else {
            setFlags(false);
        }
    };


    let getarticle = async (id) => {
        await axios.post("http://localhost:3000/editviews", { id: id })
        let res = await axios.get("http://localhost:3000/getcontext", { params: { id: id } })
        setList(res.data.list)
        let ids = res.data.list[0].user
        setIds(ids)
        getuser(ids)
        let result = await axios.get("http://localhost:3000/getping", { params: { id: id } })
        setArr(result.data.list)
        let results = await axios.get("http://localhost:3000/gethui")
        setArrs(results.data.list)
    }
    let getuser = async (ids) => {
        console.log(ids);
        let res = await axios.get("http://localhost:3000/getuser", { params: { id: ids } })
        console.log(res.data.list);
        setData(res.data.list)
    }
    let addping = async () => {
        let obj = {
            content: content,
            createTime: new Date().toISOString().replace('T', ' ').replace(/\.\d+Z$/, ''),
            article: id,
            lick: 100,
            user:sessionStorage.getItem("userid")

        }
        await axios.post("http://localhost:3000/addping", obj)
        getarticle(id)
        setContent("")
    }

    let like = async (idd) => {
        if (status === false) {
            await axios.post("http://localhost:3000/addlick", { id: idd })
            setStatus(true)
            getarticle(id)
        } else {
            await axios.post("http://localhost:3000/jianlick", { id: idd })
            setStatus(false)
            getarticle(id)
        }

    }

    let gohui = async (id, aaa) => {
        sessionStorage.setItem("回复的评论", aaa)
        console.log(id);
        setVisible5(true)
        let res = await axios.get("http://localhost:3000/getuser", { params: { id: id } })
        console.log(res.data.list);
        setDatas(res.data.list)
    }

    let hui = async () => {
        let obj = {
            content: contents,
            createTime: new Date().toISOString().replace('T', ' ').replace(/\.\d+Z$/, ''),
            ping: sessionStorage.getItem("回复的评论"),
        }
        await axios.post("http://localhost:3000/addhui", obj)
        setVisible5(false)
        setContents("")
        getarticle(id)
    }
    return (
        <div>
            {
                list.map((item, index) => {
                    return <div style={{ width: "100%", height: "30px" }}>
                        <div style={{ width: "100%", height: "60px", backgroundColor: "white", display: flags ? "block" : "none", position: "fixed", top: "0px", zIndex: "100" }}>
                            {
                                data.map(item => {
                                    return <h3 style={{ color: "black", display: "flex", justifyContent: "space-between", lineHeight: "60px" }}>
                                        <span style={{ marginLeft: "2%", fontSize: "30px" }} onClick={() => { window.history.go(-1) }}>⬅</span>
                                        <span><img src={item.avatar} alt='' style={{ borderRadius: "50% 50%", float: "left", marginRight: "10px", lineHeight: "60px", marginTop: "8px" }} width="45px" height="45px"></img>
                                            <span>{data[0].username}</span></span>
                                        <Button type="primary" style={{ marginTop: "15px" }}>{flag ? "+关注" : "-取关"}</Button>
                                        <span><Share width="25px" height="25px" onClick={() => setVisible(true)} />&nbsp;&nbsp;</span>
                                    </h3>
                                })
                            }
                        </div>
                        <div style={{ width: "100%", height: "280px", backgroundImage: `url(${list[0].img})`, backgroundSize: "cover" }}>
                            <h1 style={{ color: "white", display: "flex", justifyContent: "space-between", lineHeight: "60px" }}><span style={{ marginLeft: "2%" }} onClick={() => { window.history.go(-1) }}>⬅</span><span><Share width="25px" height="25px" onClick={() => setVisible(true)} />&nbsp;&nbsp;</span></h1>
                        </div>
                        <Mask visible={visible} onMaskClick={() => setVisible(false)}>
                            <div className="overlayContent">
                                <h1>分享至</h1><br></br>
                                <div>
                                    <svg t="1720162518177" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2619" width="48" height="48"><path d="M824.8 613.2c-16-51.4-34.4-94.6-62.7-165.3C766.5 262.2 689.3 112 511.5 112 331.7 112 256.2 265.2 261 447.9c-28.4 70.8-46.7 113.7-62.7 165.3-34 109.5-23 154.8-14.6 155.8 18 2.2 70.1-82.4 70.1-82.4 0 49 25.2 112.9 79.8 159-26.4 8.1-85.7 29.9-71.6 53.8 11.4 19.3 196.2 12.3 249.5 6.3 53.3 6 238.1 13 249.5-6.3 14.1-23.8-45.3-45.7-71.6-53.8 54.6-46.2 79.8-110.1 79.8-159 0 0 52.1 84.6 70.1 82.4 8.5-1.1 19.5-46.4-14.5-155.8z" p-id="2620" fill="#1296db"></path></svg>
                                    <svg t="1720165161806" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="3920" width="48" height="48"><path d="M664.250054 368.541681c10.015098 0 19.892049 0.732687 29.67281 1.795902-26.647917-122.810047-159.358451-214.077703-310.826188-214.077703-169.353083 0-308.085774 114.232694-308.085774 259.274068 0 83.708494 46.165436 152.460344 123.281791 205.78483l-30.80868 91.730191 107.688651-53.455469c38.558178 7.53665 69.459978 15.308661 107.924012 15.308661 9.66308 0 19.230993-0.470721 28.752858-1.225921-6.025227-20.36584-9.521864-41.723264-9.521864-63.862493C402.328693 476.632491 517.908058 368.541681 664.250054 368.541681zM498.62897 285.87389c23.200398 0 38.557154 15.120372 38.557154 38.061874 0 22.846334-15.356756 38.156018-38.557154 38.156018-23.107277 0-46.260603-15.309684-46.260603-38.156018C452.368366 300.994262 475.522716 285.87389 498.62897 285.87389zM283.016307 362.090758c-23.107277 0-46.402843-15.309684-46.402843-38.156018 0-22.941502 23.295566-38.061874 46.402843-38.061874 23.081695 0 38.46301 15.120372 38.46301 38.061874C321.479317 346.782098 306.098002 362.090758 283.016307 362.090758zM945.448458 606.151333c0-121.888048-123.258255-221.236753-261.683954-221.236753-146.57838 0-262.015505 99.348706-262.015505 221.236753 0 122.06508 115.437126 221.200938 262.015505 221.200938 30.66644 0 61.617359-7.609305 92.423993-15.262612l84.513836 45.786813-23.178909-76.17082C899.379213 735.776599 945.448458 674.90216 945.448458 606.151333zM598.803483 567.994292c-15.332197 0-30.807656-15.096836-30.807656-30.501688 0-15.190981 15.47546-30.477129 30.807656-30.477129 23.295566 0 38.558178 15.286148 38.558178 30.477129C637.361661 552.897456 622.099049 567.994292 598.803483 567.994292zM768.25071 567.994292c-15.213493 0-30.594809-15.096836-30.594809-30.501688 0-15.190981 15.381315-30.477129 30.594809-30.477129 23.107277 0 38.558178 15.286148 38.558178 30.477129C806.808888 552.897456 791.357987 567.994292 768.25071 567.994292z" fill="#1afa29" p-id="3921"></path></svg>
                                    <svg t="1720165267640" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="5093" width="48" height="48"><path d="M512 954.24A442.24 442.24 0 1 0 69.76 512 442.08 442.08 0 0 0 512 954.24z m0-30.88a401.12 401.12 0 0 1-137.12-21.92V621.6l274.24 276.64A356 356 0 0 1 512 923.36z m285.28-119.68a400 400 0 0 1-112 81.28L487.2 687.04l389.44 1.92a359.52 359.52 0 0 1-79.2 114.72z m118.24-289.28a400 400 0 0 1-21.92 136.96H613.76l276.8-273.92a355.04 355.04 0 0 1 25.12 136.96z m-232.8-368a355.68 355.68 0 0 1 114.56 79.04 402.88 402.88 0 0 1 81.44 112L680.96 535.52zM512 653.6A141.6 141.6 0 1 1 653.6 512 141.6 141.6 0 0 1 512 653.6z m0-548.32A400 400 0 0 1 649.12 128v280L375.04 130.4A356.32 356.32 0 0 1 512 105.28z m-285.28 119.84a405.44 405.44 0 0 1 112-81.44l198.4 198.08-389.44-2.08a355.68 355.68 0 0 1 79.04-114.56zM108.64 514.4a400 400 0 0 1 21.92-136.96h279.84L133.6 651.36a357.92 357.92 0 0 1-24.96-136.96z m234.72-21.12l-1.92 389.44a357.12 357.12 0 0 1-114.72-79.04 401.76 401.76 0 0 1-81.28-112z" fill="#FFFFFF" p-id="5094"></path><path d="M649.12 128A400 400 0 0 0 512 105.28a356.32 356.32 0 0 0-137.12 25.12l274.08 276.8z" fill="#FC6B4F" p-id="5095"></path><path d="M797.44 225.12a355.68 355.68 0 0 0-114.56-79.04l-1.92 389.44 197.92-198.08a402.88 402.88 0 0 0-81.44-112.32z" fill="#7838F2" p-id="5096"></path><path d="M893.76 651.36a400 400 0 0 0 21.92-136.96 355.04 355.04 0 0 0-25.12-136.96l-276.8 273.92z" fill="#5698F3" p-id="5097"></path><path d="M685.12 884.96a400 400 0 0 0 112-81.28 359.52 359.52 0 0 0 79.2-114.72l-389.44-1.92z" fill="#20E9F4" p-id="5098"></path><path d="M375.04 901.44A401.12 401.12 0 0 0 512 923.36a356 356 0 0 0 136.96-25.12L375.04 621.6z" fill="#00FD60" p-id="5099"></path><path d="M341.44 882.72l1.92-389.44L145.44 691.2a401.76 401.76 0 0 0 81.28 112 357.12 357.12 0 0 0 114.72 79.52z" fill="#ABFB5B" p-id="5100"></path><path d="M130.56 377.44a400 400 0 0 0-21.92 136.96 357.92 357.92 0 0 0 24.96 136.96l276.8-273.92z" fill="#F0E254" p-id="5101"></path><path d="M339.04 144a405.44 405.44 0 0 0-112 81.44 355.68 355.68 0 0 0-79.04 114.56l389.44 2.08z" fill="#F6B351" p-id="5102"></path></svg>
                                    <svg t="1720165338620" class="icon" viewBox="0 0 1138 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="6223" width="48" height="48"><path d="M914.432 518.144q27.648 21.504 38.912 51.712t9.216 62.976-14.336 65.536-31.744 59.392q-34.816 48.128-78.848 81.92t-91.136 56.32-94.72 35.328-89.6 18.944-75.264 7.68-51.712 1.536-49.152-2.56-68.096-10.24-78.336-21.504-79.872-36.352-74.24-55.296-59.904-78.848q-16.384-29.696-22.016-63.488t-5.632-86.016q0-22.528 7.68-51.2t27.136-63.488 53.248-75.776 86.016-90.112q51.2-48.128 105.984-85.504t117.248-57.856q28.672-10.24 63.488-11.264t57.344 11.264q10.24 11.264 19.456 23.04t12.288 29.184q3.072 14.336 0.512 27.648t-5.632 26.624-5.12 25.6 2.048 22.528q17.408 2.048 33.792-1.536t31.744-9.216 31.232-11.776 33.28-9.216q27.648-5.12 54.784-4.608t49.152 7.68 36.352 22.016 17.408 38.4q2.048 14.336-2.048 26.624t-8.704 23.04-7.168 22.016 1.536 23.552q3.072 7.168 14.848 13.312t27.136 12.288 32.256 13.312 29.184 16.384zM656.384 836.608q26.624-16.384 53.76-45.056t44.032-64 18.944-75.776-20.48-81.408q-19.456-33.792-47.616-57.344t-62.976-37.376-74.24-19.968-80.384-6.144q-78.848 0-139.776 16.384t-105.472 43.008-72.192 60.416-38.912 68.608q-11.264 33.792-6.656 67.072t20.992 62.976 42.496 53.248 57.856 37.888q58.368 25.6 119.296 32.256t116.224 0.512 100.864-21.504 74.24-33.792zM522.24 513.024q20.48 8.192 38.912 18.432t32.768 27.648q10.24 12.288 17.92 30.72t10.752 39.424 1.536 42.496-9.728 38.912q-8.192 18.432-19.968 37.376t-28.672 35.328-40.448 29.184-57.344 18.944q-61.44 11.264-117.76-11.264t-88.064-74.752q-12.288-39.936-13.312-70.656t16.384-66.56q13.312-27.648 40.448-51.712t62.464-38.912 75.264-17.408 78.848 12.8zM359.424 764.928q37.888 3.072 57.856-18.432t21.504-48.128-15.36-47.616-52.736-16.896q-27.648 3.072-43.008 23.552t-17.408 43.52 9.728 42.496 39.424 21.504zM778.24 6.144q74.752 0 139.776 19.968t113.664 57.856 76.288 92.16 27.648 122.88q0 33.792-16.384 50.688t-35.328 17.408-35.328-14.336-16.384-45.568q0-40.96-22.528-77.824t-59.392-64.512-84.48-43.52-96.768-15.872q-31.744 0-47.104-15.36t-14.336-34.304 18.944-34.304 51.712-15.36zM778.24 169.984q95.232 0 144.384 48.64t49.152 146.944q0 30.72-10.24 43.52t-22.528 11.264-22.528-14.848-10.24-35.84q0-60.416-34.816-96.256t-93.184-35.84q-19.456 0-28.672-10.752t-9.216-23.04 9.728-23.04 28.16-10.752z" p-id="6224" fill="#f4ea2a"></path></svg>
                                </div>
                            </div>
                        </Mask>
                        <div style={{ width: "100%", height: "800px", paddingTop: "4%", marginTop: "-100px", backgroundColor: "white", borderRadius: "20px 20px 0 0" }}>
                            <h1 style={{ margin: "0 2%" }}>{list[0].title}</h1>
                            <div>
                                {
                                    data.map(item => {
                                        return <div style={{ width: "100%", height: "80px", paddingTop: "4%", display: "flex", justifyContent: "space-around" }}>
                                            <div style={{ width: "50%" }}>
                                                <img src={data[0].avatar} alt='' style={{ borderRadius: "50% 50%", float: "left", marginRight: "10px" }} width="65px" height="65px"></img>
                                                <p style={{ marginTop: "5px", fontWeight: "bolder" }}>{data[0].username}</p>
                                                <p style={{ marginTop: "5px" }}>{list[0].createTime}</p>
                                            </div>
                                            <Button type="primary" style={{ marginTop: "15px" }}>{flag ? "+关注" : "-取关"}</Button>
                                        </div>
                                    })
                                }
                            </div>
                            <div style={{ width: "100%", height: "30px", paddingTop: "4%" }}>
                                <p style={{ marginLeft: "4%", marginRight: "4%", fontSize: "20px" }}>{list[0].content}</p>
                            </div>
                        </div>
                        <p style={{ textAlign: "center" }}><Button style={{ backgroundColor: "skyblue" }} onClick={() => navigate(`/zhifu?id=${ids}`)}>赞赏</Button></p>
                        <h1 style={{ marginLeft: "4%" }}>评论</h1>
                        <input type="text" value={content} onChange={(e) => { setContent(e.target.value) }} style={{ marginLeft: "4%", width: "75%" }}></input>
                        <Button type='primary' onClick={addping}>发布</Button>
                        {/* 评论 */}
                        <div style={{ marginTop: "10px", paddingLeft: "4%" }}>
                            {
                                arr.map(item => {
                                    return <div key={item._id}>
                                        <div style={{ display: "flex" }} >
                                            <img src={item.user.avatar} alt='' style={{ borderRadius: "50% 50%", float: "left", marginRight: "10px" }} width="65px" height="65px"></img>
                                            <div>
                                                <p>{item.user.username}</p>
                                                <h2 style={{ marginTop: "5px" }}>{item.content}</h2>
                                            </div>
                                        </div>
                                        <p style={{ marginTop: "5px", display: "flex", justifyContent: "space-around" }}>
                                            <span>{item.createTime}</span>
                                            <span>
                                                <svg onClick={() => like(item._id)} t="1720182541232" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2565" width="16" height="16"><path d="M621.674667 408.021333c16.618667-74.24 28.224-127.936 34.837333-161.194666C673.152 163.093333 629.941333 85.333333 544.298667 85.333333c-77.226667 0-116.010667 38.378667-138.88 115.093334l-0.586667 2.24c-13.728 62.058667-34.72 110.165333-62.506667 144.586666a158.261333 158.261333 0 0 1-119.733333 58.965334l-21.909333 0.469333C148.437333 407.808 106.666667 450.816 106.666667 503.498667V821.333333c0 64.8 52.106667 117.333333 116.394666 117.333334h412.522667c84.736 0 160.373333-53.568 189.12-133.92l85.696-239.584c21.802667-60.96-9.536-128.202667-70.005333-150.186667a115.552 115.552 0 0 0-39.488-6.954667H621.674667zM544.256 149.333333c39.253333 0 59.498667 36.48 49.888 84.928-7.573333 38.144-21.984 104.426667-43.221333 198.666667-4.512 20.021333 10.56 39.093333 30.912 39.093333h218.666666c6.101333 0 12.16 1.066667 17.909334 3.168 27.445333 9.984 41.674667 40.554667 31.776 68.266667l-85.568 239.573333C744.981333 838.026667 693.301333 874.666667 635.402667 874.666667H223.498667C194.314667 874.666667 170.666667 850.784 170.666667 821.333333V503.498667c0-17.866667 14.144-32.448 31.829333-32.821334l21.866667-0.469333a221.12 221.12 0 0 0 167.381333-82.56c34.346667-42.602667 59.146667-99.306667 74.869333-169.877333C482.101333 166.336 499.552 149.333333 544.266667 149.333333z" fill="#000000" p-id="2566"></path></svg>&nbsp;
                                                {item.lick}&nbsp;&nbsp;&nbsp;&nbsp;
                                                <svg onClick={() => {
                                                    gohui(item.user._id, item._id)
                                                }} t="1720516720380" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="3254" width="16" height="16"><path d="M511.9 827.5L610.7 726l17.4-17.9h209v-472H187.3v472.1h208.4l17.4 17.9 98.8 101.4m0 77.9c-4.1 0-8.3-1.6-11.5-4.9L370.7 767.3H166.6c-21.2 0-38.4-17.6-38.4-39.3V216.4c0-21.7 17.2-39.3 38.4-39.3h691.2c21.2 0 38.4 17.6 38.4 39.3V728c0 21.7-17.2 39.3-38.4 39.3H653L523.3 900.5c-3.2 3.2-7.3 4.9-11.4 4.9z" fill="#2c2c2c" p-id="3255"></path><path d="M334.9 433c27.2 0 49.3 22 49.3 49.2 0 27.2-22 49.2-49.3 49.2-27.2 0-49.2-22-49.2-49.2 0-27.1 22.1-49.2 49.2-49.2zM512.2 433c27.2 0 49.2 22 49.2 49.2 0 27.2-22 49.2-49.2 49.2-27.2 0-49.2-22-49.2-49.2 0-27.1 22-49.2 49.2-49.2zM689.4 433c27.2 0 49.2 22 49.2 49.2 0 27.2-22 49.2-49.2 49.2-27.2 0-49.3-22-49.3-49.2 0.1-27.1 22.1-49.2 49.3-49.2z" fill="#2c2c2c" p-id="3256"></path></svg>
                                            </span>
                                        </p>
                                        <div style={{paddingLeft:"20px"}}>
                                                {
                                                    arrs.filter(items=> items.ping===item._id).map(items=>{
                                                        return <div style={{backgroundColor:'skyblue',padding:"10px"}}>
                                                            <span>{JSON.parse(user).username}回复给{item.user.username}:</span>
                                                            <p>{items.content}</p>
                                                            </div>
                                                    })
                                                }
                                        </div>
                                    </div>
                                })
                            }
                        </div>
                        <Popup
                            visible={visible5}
                            onMaskClick={() => {
                                setVisible5(false)
                            }}
                            bodyStyle={{
                                borderTopLeftRadius: '8px',
                                borderTopRightRadius: '8px',
                                minHeight: '40vh',
                            }}
                        >
                            {
                                datas.map((item, index) => {
                                    return <div>
                                        <p style={{ marginTop: "20px", textAlign: "center" }}>回复给{item.username}</p>
                                        <p style={{ paddingLeft: "5px" }}><input value={contents} onChange={(e) => setContents(e.target.value)} style={{ width: "80%" }}></input><Button onClick={() => hui(item._id)} type='primary'>回复</Button></p>
                                    </div>
                                })
                            }
                        </Popup>
                    </div>
                })
            }
        </div>
    )
}
